<script setup lang="ts">
import TableConfig from '@/models/config/TableConfig';
import { onMounted, ref } from 'vue';
import { updateTable, scrollLeft } from '@/common/bjlTable'
import { EnumBjlResult } from '@/models/enums/EnumBjlResult';
import { reactive } from 'vue';

/**
 * 配置
 */
type Position = {
    x: number;
    y: number;
};
const tableConfig = ref(new TableConfig());
/**
 * 设置表格宽度
 */
const tableWith = ref(100);
const tableHeight = ref(100);
onMounted(() => {
    initData();
    getWindowResize();
    window.addEventListener("resize", getWindowResize)

});
const getWindowResize = function () {
    tableWith.value = window.innerWidth;
    tableHeight.value = window.innerWidth;
};
/**
 * 结果数组
 */

const dataArray = ref<number[][]>([]);
const initData = () => {
    //dataArray.value = [];

    let array = [];
    tableConfig.value = new TableConfig();
    for (let i = 0; i < tableConfig.value.RowCount; i++) {
        let cols = [];
        for (let j = 0; j < tableConfig.value.ColCount; j++) {
            cols.push(-1);
        }
        array.push(cols);
    }
    dataArray.value = array;


};
const table = ref<HTMLElement | null>(null);
const snapShot = reactive<Position[]>([]);
const setResult = (result: EnumBjlResult) => {
    updateTable(result, dataArray.value, tableConfig.value);
    snapShot.push({ x: tableConfig.value.X, y: tableConfig.value.Y });
    if (table.value != null) {
        let td = table.value.children[0].children[tableConfig.value.Y] as HTMLElement;
        scrollLeft(td);
    }
}
const revert = () => {
    let popPosition = snapShot.pop();
    if (popPosition) {
        dataArray.value[popPosition.x][popPosition.y] = -1;
    }
    let p = snapShot[snapShot.length - 1];
    tableConfig.value.X = p.x;
    tableConfig.value.Y = p.y;
};


defineExpose({
    setResult,
    initData,
    revert
})
</script>
<template>
    <table class="container">
        <tr>
            <td>
                <div class="tno">
                    <input type="text" class="tno_input" placeholder="1" maxlength="4" />
                </div>
            </td>
            <td>
                <van-row>
                    <van-col :span="24" style="overflow-x:auto;">
                        <div class="table" v-bind:style="{ width: (tableWith - 30) + 'px' }">
                            <table :border="1" cellspacing="0" cellpadding="0" ref="table">
                                <tr v-for="(rows, rindex) in dataArray" :key="rindex">
                                    <template v-for="(col, cindex) in rows">
                                        <td :key="cindex" v-if="col === 999 || col == 998"
                                            :rowspan="tableConfig.RowCount" :ref="'td_' + rindex + '_' + cindex">
                                            <van-row>
                                                <!-- 换桌 -->
                                                第{{ dataArray[0].filter((h, hi) => [999, 998].includes(h) && hi <=
                        cindex).length }}靴 </van-row>
                                        </td>
                                        <td :key="cindex + 'k'" v-else-if="col === 996" :rowspan="tableConfig.RowCount"
                                            :ref="'td_' + rindex + '_' + cindex">
                                            开工
                                        </td>
                                        <td :key="cindex + 'l'" v-else-if="dataArray[0][cindex] !== 999 &&
                        dataArray[0][cindex] !== 998
                        " :ref="'td_' + rindex + '_' + cindex">
                                            <div class="ccell" v-bind:class="[
                        col === 0 ? 'Z' : '',
                        col === 1 ? 'X' : '',
                    ]"></div>
                                        </td>
                                    </template>
                                </tr>
                            </table>
                        </div>
                    </van-col>

                </van-row>

            </td>
        </tr>
    </table>
</template>
<style scoped>
table {
    font-size: 15px;
}

.table td {
    width: 15px;
    height: 15px;
}

div.table {
    width: 100%;
    /* overflow-x: auto; */
    overflow-x: scroll;
}

input.tno_input {
    color: red;
    text-align: center;
    font-size: 8px;
    background-color: transparent;
    box-sizing: border-box;
    border: 1px solid grey;
    margin: 0;
    padding: 0;
    color: black;
    width: 20px;
    height: 20px;

}

input.tno_input::-webkit-input-placeholder {
    color: red;
}

input.tno_input::-moz-placeholder {
    color: red;
}

input.tno_input::-ms-input-placeholder {
    color: red;
}

.ccell {
    width: 15px;
    height: 15px;
    border-radius: 90px;
    box-sizing: border-box;
}

div.Z {
    border: 3px solid red;
}

div.X {
    border: 3px solid blue;
}

div.B {
    border: 3px solid rgb(6, 237, 83);
}

.revert {
    background-color: #c0c0c0;
}

.change {
    background-color: darkgoldenrod;
}

.restart {
    background-color: rgb(244, 0, 252);
}

.changetable {
    background-color: cadetblue;
}
</style>